<template>
  <div style="text-align: center;">
    <div style="height: 600px;width: 1000px;margin: 20px auto;">
      <flow-main :options="options"/>
    </div>
    <button @click="message">调用消息</button>
    <button @click="lineType">设置连线类型</button>
    <button @click="title">设置标题</button>
    <button @click="loadData(flowData)">导入数据</button><br>
    <textarea v-model="flowData" style="width:500px;height:200px"></textarea>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br><br>
  </div>
</template>

<script>
  import FlowMain from '@c/flow/FlowMain'

  export default {
    name: 'App',
    data(){
      return {
        flowData: '',
        options:{
          title: '流程图',
		      footer: '北京XXXX信息技术有限公司',
          //lineType: 'polyline' || 'line',
          tools: [
          	{key: 'start', icon: 'ico_start'},
          	{key: 'end', icon: 'ico_end'},
          	{type: 'separate'},
          	{key: 'time', title: '时间', icon: 'ico_time'},
          	{key: 'search', title: '查询', icon: 'ico_search'},
          	{key: 'offer', title: 'Offer', icon: 'ico_offer'},
          	{key: 'setting', title: '设置', icon: 'ico_setting'},
          	{key: 'sms', title: '短信', icon: 'ico_sms'},
          	{key: 'wechat', title: '微信', icon: 'ico_wechat'},
          	{type: 'separate'},
          	{key: 'split', title: '拆分', icon: 'ico_split'},
          	{key: 'merge', title: '合并', icon: 'ico_merge'}
          ],
          onClickOpen: () => {
            console.info('onClickOpen ...............');
            this.loadData(this.flowData);
          },
          onClickSave: (data) => {
            console.info('onClickSave')
            console.info(data);
            console.info('保存数据...')
            this.setMessage(data)
            this.flowData = data;
          },
          // 删除节点
          onRemoveNode: (id, type) => {
            console.info('onRemoveNode')
            console.info(id, type)
            alert('这个节点上有线不能删')
            return true; //返回false 不删除节点
          },
          onSettingNode: (id, type) => {
            console.info('onSettingNode')
            console.info(id, type)
            alert('setting')
          },
          // 双击节点
          onDblclick: (id, type) => {
            console.info('onDblclick')
            console.info(id, type)
          },
          // 新增节点
          onAddNode: (type) => {
            console.info('onAddNode', type)
          },
          // 增加连线
          onAddLine: (from, to) => {
            console.info('onAddLine')
            console.info(from, to)
          }
        }
      }
    },
    methods: {
      message() {
        this.setMessage('你好啊 我是内部消息')
      },
      lineType() {
        this.setLineType();
      },
      title() {
        this.setTitle(new Date().getTime())
      }
    },
    components: {
      FlowMain
    }
  }
</script>